<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="add">点我sum+1</button>
    </div>
</template>

<script>
export default {
/* eslint-disable */
  name: 'Person',
  data(){
    return {
        sum:1
    }
  },
  methods:{
    add(){
        this.sum += 1;
    }
  },
  //创建前的hooks
  beforeCreate(){
    console.log('创建前')
  },
  //创建完毕的hooks
  created(){
    console.log('创建完毕')
  },
  //挂载前的hooks
  beforeMount(){
    console.log('挂载前')
  },
  //挂载完毕的hooks
  mounted(){
    console.log('挂载完毕')
  },
  //更新前的hooks
  beforeUpdate(){
    console.log('更新前')
  },
  //更新完毕的hooks
  updated(){
    console.log('更新完毕')
  },
   //销毁前的hooks
  beforeDestroy(){
    console.log('销毁前')
  },
  //销毁完毕的hooks
  destroyed(){
    console.log('销毁完毕')
  }
}
</script>

<style scoped>
.person {
   background-color: skyblue;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px;
}
</style>
